<template>
	<div class="app-contain">
		<head-top></head-top>
		<div class="container nxb-box">
			<div class="i-box clearfix pr of mt10 m-video-box">
				<article class="c-v-pic-wrap">
					<section id="videoPlay" class="p-h-video-box pr"> <img class="dis c-v-pic"  :src="domain + planInfo.logo"> </section>
				</article>
				<article class="plan-sign-attr-box">
					<div class="c-attr-box">
						<h3 class="unFw mt10 pc-box-show plan-attr-title"> <font class="c-333 f-fM" :title="planInfo.name">{{planInfo.name}}</font></h3>
						<div class="mt25">
							<p class="fsize16 c-666"> <em class="icon24 plan-time-icon"></em> <span class="c-333 vam">时间：{{planInfo.createtime}}至 {{planInfo.endtime}} </span>
							</p>
							
						</div>
						<div class="mt25">
							<p>
								 <em class="icon24 plan-time-icon"></em><span class="c-333 fsize16 f-fM">报名截止时间:  {{planInfo.enrollEndtime}}</span> 
							</p>
						</div>
						<div class="mt25 hLh20 ">
							<p class="fsize16 c-666"> <em class="icon24 address-icon"></em> <span class="c-333 vam "> 地点： {{planInfo.address}}</span> </p>
						</div>
						<div class="mt25 hLh20 cou-star-box">
							<p class="fsize16 c-666 "> <em class="icon24 compl-time "></em> <span class="c-333 vam "> 状态： <span class="c-green" v-show="planInfo.enrollStatus == 1">进行中 </span><span class="c-333" v-show="planInfo.enrollStatus == 2">进行中 </span></span>
							</p>
						</div>
						<div class="mt25 hLh20 ">
							<p class="fsize16 c-333 "> <em class="icon24 student-icon "></em> <span class="vam ">已有{{planInfo.finishNum}}人报名<span class="c-999 "></span> </span>
							</p>
						</div>
						<div class="mt25 pc-box-show ">
							<div class="learn-btn fl" v-show="planInfo.enrollStatus == 1">
								<a href="javascript:void(0) " @click="enrollTask" title="立即报名 " class="bm-lr-btn signin">立即报名</a>
							</div>
							<div class="learn-btn fl"> 
								<a href="javascript:void(0)" title="已结束" class="bm-lr-btn sign-checking" v-show="planInfo.enrollStatus == 2">已结束</a> 
								<a href="javascript:void(0)" title="报名成功" class="bm-lr-btn sign-checking" v-show="planInfo.enrollStatus == 3">报名成功</a> 
							</div>
						</div>
					</div>
				</article>
			</div>
			<div class="i-box mt20 mb30 ">
				<div class="plan-enrol-box ">
					<div class="plan-intro-title ">介绍</div>
					<div class="mt10 plan-intro-desc " v-html="planInfo.info">
						
					</div>
				</div>
			</div>
		</div>
		<login-popup :showLogin = "showLoginModel" @closeDiag="closeDiag">
		</login-popup>
		<foot-bootom></foot-bootom>
	</div>
</template>

<script>
	import {  Notification } from 'element-ui';
	import { domainUrl } from '@/utils/index'
	import loginPopup from '@/components/loginPopup/index'
	import headTop from '@/components/header/header'
	import footBootom from '@/components/footer/index'
	import { getTaskInfo, enrollTask } from '@/api/plan'
	export default {
		name: 'planInfo',
		components: { //引入组件
			headTop,
			footBootom,
			loginPopup
		},
		computed: {
			userInfo() {
				return this.$store.getters.getStorageInfo;
			}
		},
		data() {
			return {
				planInfo: {},
				domain:"",
				showLoginModel:false
			}
		},
		created() {
			
			this.domain = domainUrl();
			let query = this.$route.query;
			if(this.userInfo){
				this.getTaskInfo(query.id,this.userInfo.id);
			}else{
				this.getTaskInfo(query.id,0);	
			}
			
		},
		methods: {
			closeDiag(val) { //子组件分发关闭事件
				this.showLoginModel = val;
			},
			getTaskInfo(id,userId) {
				getTaskInfo(id,userId).then((res) => {
					this.planInfo = res.entity;

				})
			},
			enrollTask(){
				if(this.userInfo){
					enrollTask(this.planInfo.id,this.userInfo.id).then((res)=>{
						Notification.success({
					 		title: '提示',
     						message: '报名成功',	
     						position: 'top-left'
					 	});
					 	this.getTaskInfo(this.planInfo.id,this.userInfo.id);
					})
				}else{
					this.showLoginModel = true;
				}
			}
			
		}
	}
</script>
<style scoped lang="scss">
	@import 'plan';
</style>